<script lang="ts" setup>
import { ref } from 'vue'
// 订单列表组件
import ScrollList from './components/scroll-list.vue'
import type { TabItem } from '@/components/custom-tab/custom-tab.vue'

interface OrderTabItem extends TabItem {
  isRendered: boolean
  type: number
}

// 标签索引值
const tabIndex = ref(0)
// 标签页数据
const orderTabs = ref<OrderTabItem[]>([
  { label: '极速问诊', isRendered: true, type: 2 },
  { label: '问医生', isRendered: false, type: 1 },
  { label: '开药问诊', isRendered: false, type: 3 },
])

// 标签页切换
const handleTabChange = (index: number) => {
  tabIndex.value = index
  orderTabs.value[index].isRendered = true
}
</script>

<template>
  <view class="consult-page">
    <view class="consult-status-tabs">
      <custom-tab :data="orderTabs" @change="handleTabChange"></custom-tab>
    </view>

    <!-- 订单列表 -->
    <template v-for="(tab, index) in orderTabs" :key="tab.label">
      <ScrollList v-show="tabIndex === index" v-if="tab.isRendered" :type="tab.type" />
    </template>
  </view>
</template>

<style lang="scss"></style>
